<template>
    <div class="outer">
        <div class="inner">

            <div class="item" v-for="item in dataList.list" :key="item.id">

                <div class="item_img" :style="{background:'url( '+item.organAvatar+') 100% 100% no-repeat'}">

                </div>

                <div class="item_content">
                    <div class="item_title">{{item.organName}}</div>
                    <div class="item_jianjie">
                        <span style="font-weight: bold">简介:</span>
                        {{item.description}}
                    </div>
                    <div class="phone_number">
                        <span>联系电话：</span>
                        <span>{{item.contactNo}}</span>
                    </div>
                </div>

            </div>

        </div>
    </div>
</template>

<script>
    import {OrganList} from "@/api/dsp/Organ";
    import baseConfig from "../../utils/config";
    export default {
        name: "yunying",
        data(){
            return{
              dataList:[]
            }
        },

        mounted(){

            let data={
              organTypeId:this.$route.query.organTypeId,
              page:1,
            }

            OrganList(data).then(res=>{
                this.dataList=res.data
                this.dataList.list.forEach(item=>{
                    item.organAvatar=baseConfig.dev+item.organAvatar
                })

              console.log(this.dataList)
            })
        },

    }
</script>

<style scoped>
    .outer {
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .inner {
        width: 1000px;
        margin: 0px auto;
        margin-top: 4px;
    }

    .item {
        width: 100%;
        height: 220px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        background: #FFFFFF;
    }

    .item_img {
        width: 170px;
        height: 170px;
        background: #010101;
        border-radius: 4px;
        margin-left: 20px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .item_content {
        width: 728px;
        margin-left: 43px;
    }

    .item_title {
        font-size: 19px;
        line-height: 19px;

        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        margin-top: 9px;

    }

    .item_jianjie {
        width: 100%;
        height: 72px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 24px;

        margin-top: 21px;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .phone_number {
        margin-top: 30px;
    }

    .phone_number > span:nth-of-type(1) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        line-height: 14px;
    }

    .phone_number > span:nth-of-type(2) {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 18px;
    }
</style>
